<template>
  <div>
    <Backnav backTitle="申请退款"></Backnav>
    <div class="section">
      <div class="orders" v-for="item in orderInfo.product" :key="item.id">
        <div class="productImg"><img :src="item.thumb" alt="" /></div>
        <div class="info">
          <div>{{ item.title }}</div>
          <div>
            1{{ orderInfo.specify }} <span>x{{ item.id }}</span>
          </div>
          <div>￥{{ 187 }}</div>
        </div>
      </div>
      <van-dropdown-menu :overlay="false">
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
      <table>
        <tr>
          <td>退款金额:</td>
          <td class="textMoney">
            <h3>￥{{ 121 }}</h3>
          </td>
        </tr>
        <tr>
          <td>详细说明:</td>
          <td>
            <van-field
              v-model="message"
              rows="1"
              autosize
              type="textarea"
              placeholder="请输入说明"
            />
          </td>
        </tr>
        <tr>
          <td>上传图片:</td>
          <td>
            <van-uploader v-model="fileList" multiple :max-count="5" />
          </td>
        </tr>
      </table>
      <div class="submitss">
        <button type="button" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import Backnav from "../../components/nav/Backnav.vue";
export default {
  components: { Backnav },
  data() {
    return {
      value1: 0,
      option1: [
        { text: "不想要了", value: 0 },
        { text: "有更便宜的价格", value: 1 },
        { text: "卖家货物不全", value: 2 },
      ],
      fileList: [],
      message: "",
      orderInfo: {
        id: "1",
        storeName: "剥壳者商城",
        orderState: "卖家处理中",
        state: "6",
        num: "30",
        specify: "独立包装(1个装)",
        storeImg: "https://img01.yzcdn.cn/vant/ipad.jpeg",
        orderNumber: new Date().getTime(),
        product: [
          {
            id: "1",
            price: "3.5",
            desc: "甜得很",
            checked: false,
            title: "黑美人西瓜",
            thumb: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          },
          {
            id: "2",
            price: "3.5",
            desc: "甜得很",
            checked: false,
            title: "脆皮西瓜",
            thumb: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          },
        ],
        allMoney: "10.5",
      },
    };
  },
  methods: {
    submit() {
      this.$router.push("/returnproduct");
    },
  },
};
</script>

<style lang="less" scoped>
.section {
  font-size: 14px;
  margin-top: 3.125rem;
  height: 200px;
  .orders {
    display: flex;
    // justify-content: space-between;
    align-content: center;
    height: 80px;
    width: calc(100%-20px);
    padding: 10px;
    border-bottom: 0.5px solid rgba(230, 230, 230, 0.76);
    .productImg {
      height: 80px;
      width: 20%;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      width: 60%;
      margin-left: 5%;
      font-size: 14px;
      div {
        margin: 2px 0;
        font-size: 13px;
      }
      div:nth-child(2) {
        background-color: #f2f2f2;
        height: 26px;
        line-height: 26px;
        display: inline-block;
        padding: 2px;
        border-radius: 5px;
      }
      div:last-child {
        color: red;
        font-weight: 800;
      }
    }
    .cheack {
      width: 10%;
      height: 80px;
      display: flex;
      align-content: center;
      justify-content: center;
      line-height: 80px;
    }
  }
  input {
    border: 0;
  }
  .van-cell {
    padding: 0;
  }
  .textMoney {
    color: red;
    font-weight: 800;
  }
  /deep/.van-uploader__upload {
    margin: 4px 8px 4px 0;
  }

  table,
  td,
  tr {
    border-left: none;
    border-right: none;
    padding: 0.125rem 0.625rem;
    font-size: 0.8125rem;
    border: 0.0625rem solid rgba(235, 233, 233, 0.678);
    height: 45px;
  }
  tr > td:last-child {
    width: 72%;
  }
  tr > td:first-child {
    width: 22%;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
}
</style>